<!DOCTYPE html>
<html>
<body>
<style>
    .clock-area{
        width:300px;
        height:300px;
        text-align: center;
        margin:200px auto;
    }
    #clock{
        border: 1px solid #ccc;
    }
</style>
<div class="clock-area">
    <canvas id="clock" width="400px" height="400px">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
</div>
<script>
window.onload = function(){
    var clock = document.getElementById("clock");
    var ctx = clock.getContext("2d");
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    var r = width / 2;
    ctx.translate(r,r);

    function drawCircle(){
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.arc(0,0,r - 5,0,2*Math.PI,false);
        ctx.stroke();
        var timeNum = [3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 , 1 , 2];
        timeNum.forEach(function(number,i){
            var rad = 2 * Math.PI / 12 * i;
            var x = Math.cos(rad) * (r - 40);
            var y = Math.sin(rad) * (r - 40);
            ctx.font = '30px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = "#000" ;
            ctx.fillText(number,x,y);
            ctx.save();
        });

            for(var i=0;i<60;i++){
                var rad = 2 * Math.PI / 60 * i;
                var x = Math.cos(rad) * (r - 20);
                var y = Math.sin(rad) * (r - 20);
                ctx.beginPath();
                //ctx.arc(x,y,2,0,2 * Math.PI,false);
                if(i % 5 === 0){
                    ctx.fillStyle = '#000';
                    ctx.arc(x,y,2,0,2 * Math.PI,false);
                }
                else{
                    ctx.fillStyle = '#ccc';
                    ctx.arc(x,y,2,0,2 * Math.PI,false);
                }
                ctx.fill();
            }

    }

    function drawHour(Hour,Min){
        ctx.save();
        var rad = Hour * 2 * Math.PI / 12;
        var mrad = Min * 2 * Math.PI / 12 / 60;
        ctx.rotate(rad + mrad);
        ctx.beginPath();
        ctx.lineCap = "round";
        ctx.lineWidth = 10;
        ctx.moveTo(0,20);
        ctx.lineTo(0,-r / 2);
        ctx.stroke();
        ctx.restore();
    }

    function drawMin(Minute,Second){
        ctx.save();
        var rad = Minute * 2 * Math.PI / 60;
        var srad = Second * 2 * Math.PI / 60 / 60;
        ctx.rotate(rad + srad);
        ctx.beginPath();
        ctx.lineCap = "round";
        ctx.lineWidth = 6;
        ctx.moveTo(0,20);
        ctx.lineTo(0,-r / 2 - 20);
        ctx.stroke();
        ctx.restore();
    }

    function drawSec(Second){
        ctx.save();
        var rad = Second * 2 * Math.PI / 60;
        ctx.rotate(rad);
        ctx.beginPath();
        ctx.lineCap = "round";
        ctx.strokeStyle="#E04444";
        ctx.lineWidth = 4;
        ctx.moveTo(0,20);
        ctx.lineTo(0,-r / 2 - 30);
        ctx.stroke();

        ctx.beginPath();
        //ctx.lineCap = "round";
        ctx.lineWidth = 8;
        ctx.moveTo(0,0);
        ctx.lineTo(0,20);
        ctx.strokeStyle="#E04444";
        ctx.stroke();
        ctx.restore();
    }

    function drawdot(){
        ctx.fillStyle="#ffffff";
        ctx.beginPath();
        ctx.arc(0,0,5,0,Math.PI * 2,false);
        ctx.fill();
    }


    function draw(){
        ctx.restore();
        //ctx.fillStyle = '#000';
        ctx.clearRect(-150,-150,width,height);

        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();


        drawHour(hour,minute);
        drawMin(minute,second);
        drawSec(second);
        drawdot();
        drawCircle();
        setTimeout(draw,1000);

    }

    draw();


    //drawHour(15);
    //drawMin(50);
    //drawSec(40);

}
</script>

</body>
</html>
